<template>
	<div>
		<div v-if="loading">{{$t("加载中")}}...</div>
		<div class="select-btn" v-else @click="show=true" style="color: #02A7F0;">{{$t("请选择")}}</div>
		<u-picker @columnchange="columnchange" range-key="label" mode="multiSelector" :range="currentArr"
			@confirm="confirm" v-model="show" :area-code='area' :default-selector="currentIndexArr"></u-picker>

	</div>
</template>

<script>
	import {
		COUNTRY
	} from '@/config/app';
	export default {
		props: ["messageItem"],
		data() {
			return {
				loading: false,
				currentIndexArr: [0, 0, 0],
				currentArr: [
					[],
					[],
					[]
				],
				list: [],
				area: [],
				show: false
			}
		},
		created() {
			this.getList();
		},
		methods: {
			getList() {
				this.loading = true;
				this.$u.api.basic.getSelectCityList({
					country: uni.getStorageSync("lang") === "zh" ? 0 : 1,
					pid: 0,
					is_port: true
				}).then(res => {
					this.loading = false;
					this.list = res;
					this.currentArr[0] = res;
					this.currentArr[1] = res[0].children;
					this.currentArr[2] = res[0].children[0].children;
				})
			},
			confirm(e) {
				const [a, b, c] = e;
				const value = {
					citySelect1: {
						label: this.currentArr[0][a].label,
						value: this.currentArr[0][a].value,
					},
					citySelect2: {
						label: this.currentArr[1][b].label,
						value: this.currentArr[1][b].value,
					},
					citySelect3: {
						label: this.currentArr[2][c].label,
						value: this.currentArr[2][c].value,
					}
				}
				if (a == 0) return;
				this.$emit("setGoToFormKV", {
					key: this.messageItem.messageAttr.eventKey,
					value,
					text: `${this.currentArr[0][a].label}-${this.currentArr[1][b].label}-${this.currentArr[2][c].label}`,
					messageItem: this.messageItem
				})
			},
			columnchange(e) {
				const {
					column,
					index
				} = e;
				console.log(e)
				if (column === 0) {
					this.currentIndexArr[0] = index;
					this.currentArr[1] = this.list[index].children;
					this.currentArr[2] = this.list[index].children[0].children;
				}
				if (column === 1) {
					this.currentIndexArr[1] = index;
					this.currentArr[2] = this.list[this.currentIndexArr[0]].children[this.currentIndexArr[1]].children;
				}
				if (column === 2) {
					this.currentIndexArr[2] = index;
				}
			}
		}
	}
</script>

<style lang="scss">
	.select-btn {
		border: 1rpx solid #ddd;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: 15rpx;
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&:active {
			background-color: #f5f5f5;
		}
	}
</style>